<template>
  <div class="clearing-container">
    <header class="header">
      <a href="javascript:;" @click="back" class="iconfont icon-go-back"></a>
      <h1 class="title m0">确认订单</h1>
    </header>
    <div class="select-addr">
      <p class="addr-title">订单配送至</p>
      <p class="addr m0" @click="selectAddrVisible = true">选择收货地址<i class="iconfont icon-jiantou-elm"></i></p>
    </div>
    <div class="time-pay">
      <div class="flex-row-sb-center c">
        <span class="time">送达时间</span>
        <span class="times" @click="popupVisible1 = true">{{arriveTime}}<i class="iconfont icon-jiantou-elm s-j"></i></span>
      </div>
      <div class="flex-row-sb-center c">
        <span class="pay-method">支付方式</span>
        <span class="method">{{datas.pay_methods[0].name}}</span>
      </div>
    </div>
    <div class="shops-container">
      <h2 class="m0 rst-name-h" v-html="rstNameFormat"></h2>
      <template v-if="group">
        <section v-for="(item, index) in group" :key="index" class="flex-row-sb-center item-box">
          <div class="flex-item-center" style="width: 100%;">
            <img-format :src="item.image_hash" class="item-img" />
            <div class="item-info flex-row-sb-center">
              <div>
                <p class="item-name m0 ellipsis">{{item.name}}</p>
                <p class="item-spec">{{item|spec}}</p>
              </div>
              <span>x{{item.quantity}}</span>
            </div>
            <div class="item-r flex-row-sb-center">
              <del class="discount-amount">￥{{item.total_price + item.total_discount_amount}}</del>
              <span class="total-price">￥{{item.total_price}}</span>
            </div>
          </div>
          <div class="group-item_r"></div>
        </section>
      </template>
      <section class="more-specil flex-row-sb-center">
        <div>
          <span class="bz-tag">包装</span>
          <span class="bz-text">{{datas.cart.extra.packing_fee.name}}</span>
        </div>
        <span class="bz-price"><small>￥</small>{{datas.cart.extra.packing_fee.price}}</span>
      </section>
      <section class="more-specil flex-row-sb-center">
        <span class="ps-text">{{datas.cart.extra.agent_fee.name}}</span>
        <div>
          <del class="discount-amount ps-dis">￥{{datas.cart.extra.packing_fee.original_price}}</del>
          <span class="ps-price"><small>￥</small>{{datas.cart.extra.packing_fee.price}}</span>
        </div>
      </section>
      <p class="more-specil m0 activity-mutex">
        {{datas.cart.activityMutexDescList[0].description}}
      </p>
      <div class="more-specil flex-row-sb-center">
        <span class="h-title">{{datas.hongpon_info.title}}</span>
        <div>
          <span class="hb-count"><i class="iconfont icon-hongbao"></i>
         {{datas.hongpon_info.available_count}}个可用
          </span>
          <i class="iconfont icon-jiantou-elm hb-jt"></i>
        </div>
      </div>
      <section class="more-specil flex-row-sb-center">
        <p class="yhsm m0">优惠说明<i class="iconfont icon-wenti"></i></p>
        <span class="price"><small>小计￥</small>{{datas.cart.total_sum}}</span>
      </section>
    </div>
    <div class="other-needs">
      <section class="more-specil flex-row-sb-center other-flex" @click="popupVisible2 = true">
        <span class="other-title">餐具份数</span>
        <div class="other-r" v-if="!canju">
          <span>{{getNum}}<i class="iconfont icon-jiantou-elm hb-jt"></i></span>
          <p class="m0 huanbao"><i class="iconfont icon-huanbao"></i>选无需餐具，马上助力环保</p>
        </div>
        <span v-else class="other-r">{{canju}}</span>
      </section>
      <section class="more-specil flex-row-sb-center other-flex">
        <span class="other-title">订单备注</span>
        <div class="other-r">
          <span>口味、偏好</span>
          <i class="iconfont icon-jiantou-elm hb-jt"></i>
        </div>
      </section>
      <section class="more-specil flex-row-sb-center other-flex">
        <span class="other-title">发票信息</span>
        <span class="other-r">{{datas.invoice.status_text}}</span>
      </section>
    </div>
    <footer class="flex-row-sb-center footer">
      <div>
        <span class="f-price">￥{{datas.cart.total_sum}}</span>
        <span class="iconfont icon-anjianfengexian"></span>
        <span class="f-dis">已优惠{{datas.cart.discount_amount_sum.toString().replace('-', '')}}</span>
      </div>
      <button class="go-pay">去支付</button>
    </footer>
    <mt-popup
      v-model="popupVisible1"
      position="bottom">
      <header class="arrive-h">
        <h2 class="arrive-title">选择到达时间</h2>
        <div class="time-container">
          <aside class="arrive-a">
            <a href="javascript:;" class="arrive-name" :class="i ===index? 's-t' : ''" v-for="(t, i) in datas.deliver_times" :key="i" @click="changeDayText(t.tab, i)">{{t.tab}}</a>
          </aside>
          <section class="arrive-s">
            <ul style="m0">
              <li class="t-item flex-row-sb-center" v-for="(t, i) in tList" :key="i" @click="changeArriveTime(t.time, i)">
                <div>
                  <span class="arrive-time"><i v-if="!i&&!index">尽快送达 | </i>{{t.time}}</span>
                  <span class="ps-desc">({{t.delivery_fee_description}})</span>
                </div>
                <i v-if="i === index2 &&show" class="iconfont icon-dagou"></i>
              </li>
            </ul>
          </section>
        </div>
      </header>
    </mt-popup>
    <mt-popup
      v-model="popupVisible2"
      position="bottom" class="popup2">
      <header class="canju-h">
        <span class="canju-pperation" @click="popupVisible2 = false">取消</span>
        <h2 class="canju-title">选择本单餐具</h2>
        <span class="canju-pperation" @click="checkResult">确定</span>
      </header>
      <section class="canju-swipe">
          <div class="swiper-container">
              <div class="swiper-wrapper">
                  <div class="swiper-slide" v-for="item in list" :key="item">{{item}}</div>
              </div>
              <div class="swiper-pagination"></div>
          </div>
      </section>
    </mt-popup>
    <div class="addr-box" v-if="selectAddrVisible">
      <header class="addr-box_h flex-item-center">
        <i class="iconfont icon-go-back" @click="selectAddrVisible = false"></i>
        <h2 class="s-addr_title">选择收货地址</h2>
      </header>
      <addr-list/>
      <new-add />
    </div>
  </div>
</template>

<script>
  import datas from '@/api/cartData'
  import ImgFormat from '_c/imgFormat/ImgFormat.vue'
  import AddrList from '_c/addrList/AddrList.vue'
  import NewAdd from '_c/addrList/NewAdd.vue'
  export default {
    name: 'clearing-page',
    data() {
      return {
        datas,
        rstName: '',
        group: undefined,
        num: 0,
        popupVisible1: false,
        index: 0,
        index2: 0,
        tList: [],
        arriveTime: '',
        dayText: '',
        current: 0,
        show: false,
        popupVisible2: false,
        list: ['无需餐具'],
        value: 0,
        canju: '',
        start: 0,
        end: 0,
        moveDistance: 0,
        scrollTarget: undefined,
        selectAddrVisible: false
      }
    },
    components: {
      ImgFormat,
      AddrList,
      NewAdd
    },
    created() {
      this.group = datas.cart.group[0]
      this.rstName = datas.cart.restaurant.name
      datas.deliver_times[0].time_points.pop(datas.delivery_reach_time)
      this.tList = datas.deliver_times[0].time_points
      this.arriveTime = '尽快送达(' + datas.delivery_reach_time + ')'
      this.dayText = datas.deliver_times[0].tab
      for(let i= 1; i< 11; i++) {
        this.list.push(i+ '份')
      }
    },
    mounted() {
      const sc = document.querySelector('.swiper-container')
      sc.addEventListener('touchstart', e => {
        if(this.moveDistance === 0) {
          this.start = e.targetTouches[0].pageY
        }
        this.scrollTarget = document.querySelector('.swiper-wrapper')
        document.addEventListener('touchmove', this.scrollCanju)
      })
      sc.addEventListener('touchend', () => {

        document.removeEventListener('touchmove', this.scrollCanju)
          if(this.moveDistance >= -50 ) {
            this.scrollTarget.style.transform = 'translate3d(0,0,0)'
            this.end = 0
            this.value = 0
          }else if(this.moveDistance < -50 && this.moveDistance > -100) {
            this.scrollTarget.style.transform = 'translate3d(0,-100px,0)'
            this.end = -100
            this.value = 1
          }else if(this.moveDistance <= -100 && this.moveDistance >= -this.scrollTarget.offsetHeight + 150){
            this.scrollTarget.style.transform = 'translate3d(0,-'+this.moveDistance.toString()[1]+'00px,0)'
            this.end = -(this.moveDistance.toString()[1]* 100)
            this.value = this.moveDistance.toString()[1]
          }else if(this.moveDistance < -this.scrollTarget.offsetHeight + 150) {
            this.scrollTarget .style.transform = 'translate3d(0,-1000px,0)'
            this.end = -1000
            this.value = 10
          }
      })
    },
    methods: {
      back() {
        window.history.back()
      },
      scrollCanju(e) {
        this.moveDistance = e.targetTouches[0].pageY - this.start
        this.moveDistance =  this.moveDistance + this.end
        this.scrollTarget.style.transform = 'translate3d(0, '+this.moveDistance+'px,0)'
      },
      changeDayText(t, i) {
        this.dayText = t
        this.index = i
        this.tList = datas.deliver_times[i].time_points
      },
      changeArriveTime(t, i) {
        this.current = this.index
        this.show = true
        this.index2 = i
        this.popupVisible1 = false
        if(!i) {
          this.arriveTime = '尽快送达(' + datas.delivery_reach_time + ')'
          return
        }
        this.arriveTime = this.dayText + t
      },
      checkResult() {
         this.popupVisible2 = false
        this.canju = this.list[this.value]
        console.log(this.value)
      }
    },
    updated() {
      if(this.current !== this.index) {
        this.show = false
      }else {
        this.show = true
      }
    },
    computed: {
      rstNameFormat() {
        const arr = this.rstName.split('(')
        let str = '<span class="rst-name">'+arr[0]+'</span><span class="rst-addr">('+arr[1]+'</span>'
        return str
      },
      getNum() {
        if(this.num === 0) {
          return '未选择'
        }else {
          return this.num
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .clearing-container {
    min-height: 100vh;
    width: 100vw;
    padding: 0 0 200px;
    background: linear-gradient(#0087ff 10%, #e5edf5 50%, transparent);
    overflow-x: hidden;
  }
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background-color: #0097FF;
    color: #fff;
  }
  .icon-go-back {
    font-size: 32px;
    color: inherit;
    float: left;
  }
  .title {
    font-size: 34px;
    text-align: center;
  }
  .select-addr {
    margin-top: 70px;
    padding: 30px;
  }
  .addr-title {
    margin-bottom: 10px;
    font-size: 28px;
    opacity: .6;
    color: #fff;
  }
  .addr {
    font-size: 42px;
    font-weight: 600;
    color: #fff;
  }
  .icon-jiantou-elm {
    font-size: 32px;
    opacity: .7;
  }
  .time-pay {
    box-sizing: border-box;
    width: 96%;
    margin: 12px auto;
    background-color: #fff;
    padding: 25px;
  }
  .c {
    padding: 20px 0;
  }
  .c:first-child {
    border-bottom: 1px solid #e5e5e5;
  }
  .time, .pay-method, .method {
    font-size: 30px;
  }
  .times {
    font-size: 26px;
  }
  .times .icon-jiantou-elm {
    color: #b6b6b6;
    font-weight: 600;
  }
  .method, .times {
    color: #0097FF;
  }
  .shops-container {
    box-sizing: border-box;
    width: 96%;
    padding: 0 20px;
    background-color: #fff;
    margin: 10px auto;
  }
  .rst-name-h {
    padding: 30px 0;
    border-bottom: 1px solid #dfdfdf;
  }
  .item-box {
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  .item-info {
    width: 300px;
    margin-left: 20px;
  }
  .item-name {
    width: 260px;
    font-size: 26px;
  }
  .item-spec {
    margin: 10px 0;
    font-size: 22px;
    color: #666;
  }
  .item-r {
    box-sizing: border-box;
    padding: 0 40px;
    width: 100%;
  }
  .discount-amount {
    font-size: 28px;
    color: #bbb;
  }
  .item-img {
    width: 200px;
  }
  .total-price {
    color: #FF5500;
    font-size: 28px;
  }
  .bz-tag {
    padding: 3px 10px;
    background-color: #d2d9e2;
    font-size: 24px;
    color: #8899b1;
  }
  .bz-text {
    margin-left: 20px;
    font-size: 26px;
  }
  .more-specil {
    padding: 26px 20px;
    border-bottom: 1px solid #eee;
  }
  .bz-price {
    font-size: 30px;
  }
  .ps-price {
    font-size: 32px;
    margin-left: 30px;
  }
  .ps-dis {
    font-size: 30px;
  }
  .ps-text {
font-size: 28px;
  }
  .activity-mutex {
    font-size: 28px;
    color: #999;
  }
  .h-title {
    font-size: 28px;
  }
  .hb-count {
    padding: 4px 5px;
    background-color: #f95558;
    border-radius: 4px;
    color: #fff;
  }
  .icon-hongbao {
    font-size: 28px;
  }
  .hb-jt {
    color: #afafaf;
    font-weight: 600;
  }
  .yhsm {
    font-size: 28px;
    color: #999;
  }
  .icon-wenti {
    font-size: 26px;
  }
  .price {
    font-size: 34px;
  }
  .other-needs {
    box-sizing: border-box;
    width: 96%;
    margin: 20px auto;
    background-color: #fff;
    padding: 20px;

  }
  .other-flex {
    align-items: flex-start;
    text-align-last: right;
  }
  .other-title {
    font-size: 30px;
  }
  .other-r {
    font-size: 26px;
    color: #999;
  }
  .huanbao {
    color: #24c251;
  }
  .icon-huanbao {
    font-size: 28px;
  }
  .footer {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 20px;
    background-color: #3c3c3c;
  }
  .f-price {
    color: #fff;
    font-size: 34px;
  }
  .icon-anjianfengexian {
    font-size: 30px;color: #aaa;
  }
  .f-dis {
    color: #aaa;
    font-size: 26px;
  }
  .go-pay {
    padding: 20px;
    background-color: #00ef6b;
    border-radius: 5px;
    font-size: 34px;
    color: #fff;
  }
  .mint-popup {
    box-sizing: border-box;
    width: 100%;
    background-color: #eee;
  }
  .arrive-title {
    text-align: center;
    font-weight: normal;
    color: #333;
  }
  .time-container {
    display: flex;
  }
  .arrive-a {
    flex: 3;
  }
  .arrive-s {
    flex: 7;
    background-color: #fff;
    max-height: 600px;
    overflow-y: scroll;
  }
  .arrive-name {
    display: block;
    padding: 36px 20px;
    background-color: transparent;
    font-size: 26px;
    color: #666;
  }
  .s-t {
    background-color: #fff;
  }
  .t-item {
    padding: 30px 0;
    border-bottom: 1px solid #eee;
  }
  .arrive-time {
    font-size: 28px;
    color: #333;
  }
  .ps-desc {
    margin-left: 20px;
    color: #ccc;
    font-size: 24px;
  }
  .icon-dagou {
    margin-right: 10px;
    font-size: 28px;
    color: #00FF00;
  }
  .canju-h {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #444;
  }
  .canju-title {
    margin: 20px 200px;
    font-size: 34px;font-weight: normal;
  }
  .canju-pperation {
    font-size: 28px;
  }
  .canju-swipe {
    height: 500px;
    overflow: hidden;
  }
  .popup2 {
    background-color: #fff;
  }
  .swiper-container {
    height: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    z-index: 1;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 200px;
      top: -200px;
      background: linear-gradient(#fff, rgba(255, 255, 255, .8) 80%, transparent);
      z-index: 2;
    }
    &::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      height: 200px;
      bottom: -200px;
      background: linear-gradient(transparent, rgba(255, 255, 255, .2) 10%, #fff);
      z-index: 2;
    }
  }
  .swiper-slide {
    height: 100px;
    text-align: center;
    line-height: 100px;
  }
  .addr-box {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    min-height: 100vh;
    background-color: #fff;
  }
  .addr-box_h {
    box-sizing: border-box;
    background-color: #00A9FF;
    height: 80px;
    padding: 0 10px;
    color: #efeff4;
  }
  .s-addr_title {
    width: 100%;
    text-align: center;
  }
</style>
